<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>calculator</title>
    <style>
        .container {
            width: 300px;
            margin: 0 auto;
        }

        .calculator {
            padding: 10px;
            background: #3f3e3e;
            border-radius: 5px;
        }

        .input {
            width: 268px;
            height: 30px;
            line-height: 30px;
            border: 1px solid #ccc;
            background-color: #ffffff;
            border-radius: 5px;
            margin-bottom: 20px;
            text-align: right;
            padding: 0 5px;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .button-group {
            position: relative;
            width: 280px;
        }

        .button-group button {
            width: 66px;
            margin-bottom: 20px;
            line-height: 30px;
            background-color: white;
            height: 30px;
            border: 1px solid #ccc;
            cursor: pointer;
            border-radius: 5px;
        }

        .button-group > div button {
            background-color: #da7d2b;
            border-color: #da7d2b;
            color: white;
        }

        .symbol {
            display: inline-block;
            line-height: 28px;
            height: 28px;
            width: 80px;
            background-color: honeydew;
            border-radius: 5px;
            position: absolute;
            right: 3px;
            text-align: center;

        }
    </style>
</head>
<body>
<div class="container">
    <div class="calculator">
        <div class="input">0</div>
        <div class="button-group">
            <div>
                <button>AC</button>
                <div class="symbol"></div>
            </div>
            <button>7</button>
            <button>8</button>
            <button>9</button>
            <button>-</button>
            <button>4</button>
            <button>5</button>
            <button>6</button>
            <button>+</button>
            <button>1</button>
            <button>2</button>
            <button>3</button>
            <button>*</button>
            <button>0</button>
            <button>.</button>
            <button>=</button>
            <button>/</button>
        </div>
    </div>
</div>

<script src="js/jquery-1.12.0.min.js"></script>
<script>
    var symbol = ['AC', '/', '*', '-', '+', '='];
    var operand = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, '.'];
    var input = $('.input');
    var inputSymbol = $('.symbol');
    var compute = {
        result: 0,
        value: 0,
        action: '+',
        clear: false
    };
    $(document).ready(function () {
        $('.button-group').delegate('button', 'click', function () {
            buttonClick($(this));
        });
    });

    function buttonClick(el) {
        var val = el.text();
        if ($.inArray(val, symbol) !== -1) {
            inputSymbol.text(val);
            symbolAction(val);
        } else if ($.inArray(val, operand)) {
            if (compute.clear === true) {
                compute.clear = false;
                input.text(0);
            }
            var inputVal = input.text() + val;
            if (val === '.' && !isNaN(inputVal)) {
                input.text(inputVal);
            } else {
                input.text(parseFloat(inputVal));
            }
        }
    }

    function symbolAction(action) {
        compute.result = compute.value;
        switch (action) {
            case 'AC': {
                input.text('0');
                compute.result = 0;
                compute.value = 0;
                compute.action = '+';
                compute.clear = false;
                break;
            }
            case '=': {
                compute.value = parseFloat(input.text());
                compute.clear = true;
                computeData();
                break;
            }
            case '+': {
                compute.value = parseFloat(input.text());
                compute.clear = true;
                compute.action = '+';
                computeData();
                break;
            }
            case '-': {
                compute.value = parseFloat(input.text());
                compute.clear = true;
                compute.action = '-';
                computeData();
                break;
            }
            case '*': {
                compute.value = parseFloat(input.text());
                compute.clear = true;
                compute.action = '*';
                computeData();
                break;
            }
            case '/': {
                compute.value = parseFloat(input.text());
                compute.clear = true;
                compute.action = '/';
                computeData();
                break;
            }
        }
    }

    function computeData() {
        var resultData = 0;
        switch (compute.action) {
            case '+': {
                resultData = compute.result + compute.value;
                break;
            }
            case '-': {
                resultData = compute.result - compute.value;
                break;
            }
            case '*': {
                resultData = compute.result * compute.value;
                break;
            }
            case '/': {
                if (compute.value !== 0) {
                    resultData = compute.result / compute.value;
                } else {
                    alert('被除数不能为0');
                }
                break;
            }
            default: {
                alert('计算方式不正确');
                break;
            }
        }
        input.text(resultData);
    }
</script>
</body>
</html>